<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="suggest-plus-content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true">
			<template #top>
				<view>
					<u-navbar :border-bottom="false" title="添加商品" :background="{'background':'#fff'}" :title-size="36" :title-bold="true" :title-color="textColor">
					</u-navbar>
					<view class="u-p-20"    style="background-color: #fff;">
						<u-search :searchIconFlag="true" v-model="searchText" input-align="center" placeholder="输入名称筛选" 
						height="70" :border-color="'#FFBB1A'" :bg-color="'#fff'" 	:show-action="false" @change="reloadFn" @search="reloadFn"></u-search>
					</view>
					<view class="u-flex u-p-b-20 filter-bottom" style="background-color: #fff;">
						<u-dropdown  :isFilterMenu="true" active-color="#ff551a" class="filter-drop-container" :titleStyle="{}" :menu-icon="'arrow-down-fill'" :menu-icon-size="10" >
							<u-dropdown-item :inheritParent="true" :title="ownerTitle" v-model="filterOwner"  @change="reloadFn" :options="ownerListShow" v-show="ownerListShow.length!=0"></u-dropdown-item>
							<u-dropdown-item :inheritParent="true" :title="classTitle" :height="500" v-model="filterClass" @change="reloadFn" :options="classListShow"></u-dropdown-item>
						</u-dropdown>
					</view>
				</view>
			</template>
			
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="suggest-container "  >
				<view class="suggest-section u-p-l-35  u-p-r-35">
						<u-checkbox-group :wrap="true" :size="40" :icon-size="20" 
						:label-disabled="true" shape="circle" :active-color="themeColor">
							<u-checkbox
								v-model="item.isSelect" 
								:name="item.inventoryId"
								:disabled="chooseItemUrls.length>=24&&!item.isSelect"
								class="check-container u-p-t-30 u-p-b-30"
								v-for="(item,index) in dataList" :key="item.id"
								@change="chooseItemChange($event,item.url)"
							>
								<view style="width: 100%;" class="u-flex ">
									<image :src="item.url" mode="" class="u-m-r-20" style="width: 160rpx;height: 160rpx;"></image>
									<view style="flex:1;overflow: hidden;">
										<view class="item-name u-line-1 u-font-28" style="width: 100%;">{{item.itemName}}</view>
										<view class="item-val" style="border: 1px solid #FF551A;">
											<view class="item-val-text item-val-specifica-title">规格</view>
											<view class="item-val-text item-val-specifica-text">{{item.specification}}</view>
										</view>
										<br />
										<view class="item-val" style="border: 1px solid #C09A87;">
											<view class="item-val-text item-val-owner-title">品牌商</view>
											<view class="item-val-text item-val-owner-text">{{item.brandOwnerName}}</view>
										</view>
										<view class="u-flex u-row-between" style="width: 100%;">
											<view class="u-font-22" style="color: #999;">库存{{item.inventoryBalance}}{{item.unit||'瓶'}}</view>
											<!-- <view class="u-font-22">在售</view> -->
										</view>
									</view>
								</view>
							</u-checkbox>
						</u-checkbox-group>
				</view>
			</view>
			<template #bottom>
				<view  class="u-flex u-row-between suggest-bottom" >
					<view @click="sortShow = !sortShow;">
						已选 {{chooseItemUrls.length}} 个推荐商品
						<u-icon name="arrow-up" :class="['suggest-icon',{'icon-rotate':sortShow}]"></u-icon>
					</view>
					<view @click="saveSuggestList" style="width: 200rpx;background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);border-radius: 45rpx;" class="u-text-center u-p-t-20 u-p-b-20" >确定</view>
				</view>
			</template>
			
		</z-paging>
		<u-popup mode="bottom" v-model="sortShow" class="sort-show">
			<view style="height: 100%;flex-direction: column;" class="u-flex">
				<view class="u-text-center u-p-t-30 u-p-b-30">拖动排序</view> 
				<view style="flex:1;width: 100%;">
					<drag-item v-if="sortShow" v-model="chooseItemUrls" @delete="deleteFn" @update:modelValue="changeList"  keyName="url" :imageWidth="150"></drag-item>
				</view>
			</view>
		</u-popup>
		<akLoading isFullScreen :active="loading"></akLoading>
	</view>
</template>

<script>
	import DragItem from '@/components/Drag-Item/index.vue'
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components:{DragItem},
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				searchText:'',
				filterOwner:'',
				filterClass:'',
				ownerListShow:[],
				classListShow:[],
				ownerTitle:'品牌商',
				classTitle:'分类',
				sortShow:false,
				chooseItemUrls:[],
				sortList:[],
				loading:false,
			}
		},
		onLoad(options) {
			this.chooseItemUrls = JSON.parse(options.chooseItemIds);
			let ary = [];
			this.chooseItemUrls.forEach((item,index)=>{
				ary.push({
					id:item.id,
					sort:index
				});
			});
			this.sortList = ary;
			// if(this.chooseItemUrls.length >=24){
			//    this.$u.toast('最多可添加24个产品~')
			// }
		},
		created(){
			// this.$refs.paging.reload();
			this.getOwnerList();
			this.getClassListFn();
		
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		methods: {
			changeList(data){
				this.sortList = data.map((item,index)=>{return {id:item.id,sort:index}});
				
			},
			reloadFn(){
				this.$refs.paging.reload();
			},
			deleteFn(id){
				this.dataList.map((item,index)=>{
					if(item.inventoryId === id){
						item.isSelect = false;
					}
				});
			},
			chooseItemChange(data,url){
				if(data.value){
					this.chooseItemUrls.push({
						url:url,id:data.name
					});
					this.sortList.push({
						id:data.name,
						sort:this.sortList.length
					});
				}else{
					let index = this.chooseItemUrls.findIndex(item=>{return item.id === data.name});
					this.chooseItemUrls.splice(index,1);
					this.sortList.splice(index,1);
				}
				if(this.chooseItemUrls.length == 24){
					this.$u.toast('最多可添加24个产品~')
				}
			},
			// 获取分类列表
			async getClassListFn() {
			   let params = {
					SellerId: this.storeShop.id,
					IncludeChildren:true
			   }
			   const res = await this.$newHttp.get('api/v1.2/ShanNiang/GetSellerCategories', { params: params } );
				if (res.code === 200) {
					let ary = [{label:"全部",value:0}];
					res.data.forEach(item => {
						ary.push({
							label:item.name,
							value:item.id
						})
						if(item.children.length!=0){
							item.children.forEach(child => {
								ary.push({
									label:child.name,
									value:child.id
								})
							});
						}
					})
					this.classListShow = ary;
			   } else {
				   this.classListShow = [];
				   this.$message.error('获取分类列表失败，错误信息：'+res.erroMessage)
			   }
			},
			
			// 获取品牌商列表
			async getOwnerList(){
				let params = {
					shopId:this.storeShop.id
				}
				const res = await this.$newHttp.get('api/v1.2/ShanNiang/GetBrandOwners', { params: params } );
				if(res.code === 200){
					if (res.data.length !== 0) {
						let ary = [
							{label:"全部",value:0}
						]
						res.data.forEach((item, index) => {
							ary.push({
								label:item.name,
								value:item.shopId
							})
						});
						this.ownerListShow = ary;
					}
				}else{
					this.$u.toast('获取品牌商列表失败');
				}
			},
			
			
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					shopId:this.storeShop.id,
					IsHaltSale:false,
				}
				if (this.searchText !== '') {
					params.Name = this.searchText;
				}
				 if(this.filterClass !== '' &&this.filterClass!=0){
					params.ShopCategoryId = this.filterClass;
				 }
				 if(this.filterOwner !== '' &&this.filterOwner!=0){
					params.BrandOwnerId = this.filterOwner;
				 }
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				const res = await this.$newHttp.get('api/v1.2/Seller/GetShopInventoriesPage', { params: params } );
				uni.hideLoading({
					title: '加载中...'
				})
				if(res.code === 200){
					res.data.list.map(item=>{
						item.isSelect = (this.chooseItemUrls.findIndex(child=>{return child.id === item.inventoryId})!= -1);
					})
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			async saveSuggestList(item) {
				this.loading = true;
				// if(this.chooseItemUrls.length>24){
				// 	this.loading = false;
				// 	this.$u.toast('最多可设置24个推荐商品')
				// 	return false;
				// }
				let params = {
					items:this.sortList
				}
				const res = await this.$newHttp.post('api/v1.2/Seller/SetRecommendGoods', params );
				this.loading = false;
				if(res.code === 200){
					uni.showToast({
						title:'保存成功'
					})
					uni.$emit('refreshSuggest');
					uni.navigateBack({
						delta: 1
					})
				}else{
					this.$u.toast('保存数据失败，错误信息：'+res.erroMessage)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.suggest-plus-content {
		height: 100%;
		.filter-bottom{
			.filter-drop-container{
				box-sizing: border-box;
				padding: 0 30rpx;
				
				::v-deep .u-dropdown__menu__item{
					background: #FAFAFA;
					border-radius: 34rpx;
					&:nth-last-of-type(2){
						margin: 0 20rpx;
					}
				}
				::v-deep .filter-dropitem-active{
					border-bottom-left-radius: 0px;
					border-bottom-right-radius: 0px;
				}
				.link-view{
					height: 20rpx;background-color: #fff;box-sizing: border-box;padding: 0 30rpx;
					.link-view-item{
						height: 20rpx;
						flex:1;
					}
				}
				
			}
		}
		.suggest-bottom{
			background-color: #fff;
			border: 1px solid #EEEEEE;
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 140rpx;
			z-index:10075;
			/* #ifdef APP-PLUS */
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */
			.suggest-icon{
				transition: transform .3s;
				transform: rotate(0deg);
				margin-left: 10rpx;
			}
			.icon-rotate{
				transition: transform .3s;
				transform: rotate(180deg);
			}
		}
		.suggest-container{
			.suggest-section{
				background-color: #fff;
				line-height: 0;
				.check-container{
					border-bottom: 1px solid #eee;
					::v-deep .u-checkbox__label{
						margin-right: 0;
						flex:1;
						overflow: hidden;
					}
				}
				.item-name{
					font-weight: 500;
				}
				.item-val{
					display: inline-block;
					font-size: 20rpx;
					box-sizing: border-box;
					border-radius: 4px;
					
					.item-val-text{
						display: inline-block;
						box-sizing: border-box;
						padding: 0rpx 10rpx;
					}
					.item-val-specifica-title{
						border-right: 1px solid #ff551a;
						background-color: #FFE1D6;
						color: #FF551A;
						border-top-left-radius: 4px;
						border-bottom-left-radius: 4px;
					}
					.item-val-specifica-text{
						color: #FF551A;
					}
					.item-val-owner-title{
						border-right: 1px solid #C09A87;
						background-color: #FAF1DF;
						color: #B88D77;
						border-top-left-radius: 4px;
						border-bottom-left-radius: 4px;
					}
					.item-val-owner-text{
						color: #B88D77;
					}
				}
			}
		}
		.sort-show{
			bottom:140rpx;
		}
	}


</style>
